<template>
    <div>
        <Form ref="formInline" inline :label-width="65">
            <FormItem label="名称:">
                <Input type="text" v-model="searchData.name" />
            </FormItem>
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <showRule name="addRoleBtn">
                <Button @click="showAddRoleDrawer(false)" type="primary" style="margin-left: 10px;">添加</Button>
            </showRule>
        </Form>
        <Table row-key="id" :columns="columns" :data="list" border :highlight-row="true" max-height="600" size="small"
            stripe>
            <template slot-scope="{ row , index}" slot="memberSlot">
                <showRule name="editRoleBtn">
                    <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
                        <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;"
                            @click.stop="showAddRoleDrawer(row)" />
                    </Tooltip>
                </showRule>
                <showRule name="delRoleBtn">
                    <Tooltip content="删除" style="margin-left: 10px;" placement="top">
                        <Icon type="md-trash" size="24" color="red" style="cursor: pointer;"
                            @click.stop="delRole(row.id)" />
                    </Tooltip>
                </showRule>
                <showRule name="editRuleBtn">
                    <Tooltip content="权限管理" style="margin-left: 10px;" placement="top">
                        <Icon type="md-build" size="24" color="green" style="cursor: pointer;" @click="editRoleRule(row)" />
                    </Tooltip>
                </showRule>
            </template>
        </Table>
        <br>
        <!-- <paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </paginate> -->
        <Drawer title="部门信息" :closable="false" width="40" v-model="showAdd">
            <Form ref="formValidate" :model="roleInfo" :rules="ruleInline" :label-width="100">
                <FormItem label="上级部门">
                    <Select v-model="roleInfo.pid" filterable>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="部门名称" prop="role_name">
                    <Input v-model="roleInfo.name" placeholder="部门名称"></Input>
                </FormItem>
                <FormItem label="状态">
                    <RadioGroup v-model="roleInfo.status">
                        <Radio label="0" border>正常</Radio>
                        <Radio label="1" border>禁用</Radio>
                    </RadioGroup>
                </FormItem>
                <!-- <FormItem label="排序值">
                    <Input v-model="roleInfo.sort" placeholder="排序值" type="number"></Input>
                    <Alert type="warning">排序值由大到小排列</Alert>
                </FormItem> -->
                <FormItem>
                    <Button type="primary" @click="submit">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
</template>

<script>
import paginate from "@/components/paginate/paginate.vue";
import rule from "./rule";
import _ from 'view-design/dist/styles/iview.css'
export default {
    components: {
        paginate,
        rule,
    },
    data() {
        return {
            roleId: 0,
            roleList: [],
            // 列表
            columns: [
                {
                    title: '部门名称',
                    key: 'name',
                    tree: true
                },
                // {
                //     title: '排序',
                //     key: 'sort',
                // },
                {
                    title: '状态',
                    key: 'is_del',
                    render: function (h, param) {
                        let text = param.row.status == 0 ? '开启' : '关闭';
                        return h('div', text);
                    }
                },
                {
                    title: '管理',
                    key: 'make',
                    slot: 'memberSlot',
                    minWidth: 100,
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            showAdd: false,
            // 管理信息
            roleInfo: {},
            ruleInline: {
                name: [{ required: true, message: '名称', trigger: 'blur' }],
            },
        }
    },
    methods: {
        search() {
            this.searchData.page = 1;
            this.getRoleList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getRoleList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getRoleList();
        },
        getRoleList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/department/getList', param).then(res => {
                this.list = res;
            });
        },
        // 显示添加部门弹窗
        showAddRoleDrawer(row) {
            if (row) {
                this.roleInfo = { ...row };
                this.roleInfo.status = row.status + '';
            } else {
                this.roleInfo = {
                    id: 0,
                    pid: 1,
                    sort: 0,
                    name: "",
                    status: "0",
                };
            }
            this.$axios('/admin/department/getDepartmentArr').then(res => {
                this.roleList = res;
            });
            this.showAdd = true;
        },
        // 添加部门
        submit() {
            this.$axios('/admin/department/save', this.roleInfo).then(res => {
                this.showAdd = false;
                this.getRoleList();
            })

        },
        delRole(id) {
            this.$axios('/admin/department/del', {id:id}).then(res => {
                this.getRoleList();
            })
        },
        /**
         * 规则编辑
         */
        editRoleRule(row) {
            this.$refs.ruleRef.showRules(row.id);
        }
    },
    created() {
        // 查询自己管理员
        this.roleId = localStorage.getItem('roleId');
        this.getRoleList();
    }
}
</script>

<style></style>
